// 学员信息
<template>
    <div>
        <div>
            <!-- 返回最初 -->
            <!-- <div>
                <el-link style="float:right; width:2px" type="primary" @click="max">返璞</el-link>
            </div> -->
            <div v-if="watch">
                <!-- 查询搜索框 -->
                <span style="display:inline-block; ">
                    <el-form :inline="true" :model="selectfrom" class="demo-form-inline">
                        <!-- <el-form-item label="姓名">
                            <el-input v-model="selectfrom.name" placeholder="姓名" style="width:150px"></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item label="性别">
                            <el-select v-model="selectfrom.sex" placeholder="性别" style="width:80px">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                                <el-option label="" value=""></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item>
                            <el-tooltip class="item" effect="dark" content="信息模糊查询" placement="bottom-start">
                                <el-button type="primary" @click="nameselect()">模糊查询</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </span>
                <span style="display:inline-block; ">
                    <el-form :inline="true" :model="selectfrom" class="demo-form-inline">
                        <!-- <el-form-item label="班级">
                            <el-select v-model="selectfrom.classname" placeholder="班级名" style="width:150px">
                                <el-option label="王者班" value="王者班"></el-option>
                                <el-option label="荣耀班" value="荣耀班"></el-option>
                                <el-option label="英雄班" value="英雄班"></el-option>
                                <el-option label="联盟班" value="联盟班"></el-option>
                                <el-option label="" value=""></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item>
                             <el-tooltip class="item" effect="dark" content="按照学员的班级名进行查询" placement="bottom">
                            <el-button type="primary" @click="classselect()">班级查询</el-button>
                             </el-tooltip>
                        </el-form-item>
                    </el-form>
                </span>
                <span style="display:inline-block; ">
                    <el-form :inline="true" :model="selectfrom" class="demo-form-inline">
                        <!-- <el-form-item label="来源">
                            <el-input v-model="selectfrom.school" placeholder="学校" style="width:300px"></el-input>
                        </el-form-item> -->
                        <el-form-item>
                            <el-tooltip class="item" effect="dark" content="按照学员的之前的学校进行查询" placement="bottom-end">
                            <el-button type="primary" @click="schoolselect()">来源查询</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </span>
                <el-pagination
                    style="display:inline-block; "
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="student_list.length"
                >
                </el-pagination>
            </div>
            <div v-if="see">
                <!-- 自动查询全部的表格 -->
                <el-table
                    :data="student_list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    stripe
                    style="width: 100%"
                    height="580"
                >
                    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
                    <el-table-column prop="sex" label="性别" width="180"> </el-table-column>
                    <!-- <el-table-column prop="headmaster" label="班主任" width="180"> </el-table-column> -->
                    <el-table-column prop="status" label="状态" width="180"> </el-table-column>
                    <el-table-column prop="classname" label="班级名" width="180"> </el-table-column>
                    <el-table-column prop="tele" label="电话" width="180"> </el-table-column>
                    <el-table-column prop="date" label="生日" width="180"> </el-table-column>
                    <el-table-column prop="tele" label="操作" width="180" fixed="right">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-search" type="text" @click="allcx(scope.row.sid)"
                                ><i class="el-icon-edit">查看详情并编辑</i></el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="seen">
                <!-- 个人页 -->
                <el-button style="float:right" type="primary" @click="allqx">取消并返回</el-button>
                <!-- <el-button type="primary" @click="qx">取消</el-button> -->
                <el-form ref="student" :model="student" label-width="50%" style="clear:both;" :rules="rules">
                    <div style="width:800px">
                        <el-form-item label="姓名">
                            <el-input v-model="student.name"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="student.sex">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="电话" prop="tele">
                            <el-input v-model="student.tele"></el-input>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-date-picker type="date" placeholder="选择日期" v-model="student.date"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model="student.address"></el-input>
                        </el-form-item>
                        <el-form-item label="学校">
                            <el-input v-model="student.school"></el-input>
                        </el-form-item>
                        <el-form-item label="专业">
                            <el-input v-model="student.speciality"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="学生id">
                            <el-input v-model="student.sid"></el-input>
                        </el-form-item> -->
                        <!-- <el-form-item label="班主任">
                            <el-input v-model="student.headmaster"></el-input>
                        </el-form-item> -->
                        <el-form-item label="缴费方式">
                            <!--费方式（分期0、全款1）  -->
                            <el-select v-model="student.payway">
                                <el-option label="分期" value="0"></el-option>
                                <el-option label="全款" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态">
                            <!-- 状态（在读1、离校0、试听-1） -->
                            <el-select v-model="student.status">
                                <el-option label="在读" value="0"></el-option>
                                <el-option label="离校" value="1"></el-option>
                                <el-option label="试听" value="-1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班级名">
                            <el-select v-model="student.classname">
                                <el-option label="王者班" value="王者班"></el-option>
                                <el-option label="荣耀班" value="荣耀班"></el-option>
                                <el-option label="英雄班" value="英雄班"></el-option>
                                <el-option label="联盟班" value="联盟班"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="班级ID">
                            <el-input v-model="student.cid"></el-input>
                        </el-form-item> -->

                        <el-form-item style="width:970px">
                            <el-button type="primary" @click="allupdate('student')">立即修改</el-button>

                            <el-button type="primary" @click="allqx">取消</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'stumain',
    inject: ['reload'],
    data() {
        return {
            rules: {
                tele: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { pattern: /^1[3578]\d{9}$/, message: '手机号码不合法' }
                ]
            },
            watch: true,
            see: true,
            seen: false,
            currentPage: 1, //初始页
            pagesize: 10, //    每页的数据

            student_list: [],
            // panduan:false,
            // notpanduan:true,
            student: {},
            studentselect: [],
            form: {
                payway: 'student.payway',
                status: 'student.status'
            },
            selectfrom: {
                name: '',
                sex: '',
                classname: '',
                school: ''
            }
        };
    },
    created() {
        var that = this;
        this.axios('http://192.168.2.225:8080/com.huidian.rem/FindAllStudent').then(function(res) {
            res.data.forEach(element => {
                element.status = element.status == 1 ? '在读' : element.status == 0 ? '离校' : '试听';
            });
            that.list = res.data;
            console.log(that.list);
            that.student_list = that.list;
            // console.log(that.student_list)
            // console.log("dddd")
        });
    },
    methods: {
        handleSizeChange: function(size) {
            this.pagesize = size;
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
            console.log(this.currentPage); //点击第几页
        },
        max: function() {
            var that = this;
            that.watch = true;
            that.see = true;
            that.seen = false;

            // that.panduan=false
            // that.notpanduan=true
        },
        allcx: function(sid) {
            // console.log('“啊啊啊');
            var that = this;
            that.watch = false;
            that.see = false;
            that.seen = true;

            this.axios({
                method: 'post',
                url: 'http://192.168.2.225:8080/com.huidian.rem/FindoneStudent',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: JSON.stringify({
                    sid
                })
            })
                .then(res => {
                    console.log(res.data);
                    // console.log(res.data.payway);
                    var aaa = res.data;
                    aaa.payway = aaa.payway == 0 ? '分期' : '全款';
                    //  <!-- 状态（在读1、离校0、试听-1）
                    aaa.status = aaa.status == 1 ? '在读' : aaa.status == 0 ? '离校' : '试听';
                    // console.log(aaa.status);
                    that.student = res.data;
                    // console.log('student');
                    // console.log(student);
                    // console.log('student');

                    // window.location.href="http://localhost:8080/#/classmanager"
                })
                .catch(error => {
                    console.log(error);
                });
        },
        allqx: function() {
            var that = this;
            that.watch = true;
            that.see = true;
            that.seen = false;
        },

        allupdate: function(formName) {
            // console.log("修改惺惺惜惺惺")
            var that = this;
            // console.log(that.student);
            var s = that.student;

            s.payway = s.payway == '分期' ? 0 : 1;
            //  <!-- 状态（在读1、离校0、试听-1）
            s.status = s.status == '在读' ? 1 : s.status == '离校' ? 0 : -1;

            var address = s.address;
            var cid = s.cid;
            var classname = s.classname;
            var date = s.date;
            // var headmaster = s.headmaster;
            var name = s.name;
            var payway = s.payway;
            var school = s.school;
            var sex = s.sex;
            var sid = s.sid;
            var speciality = s.speciality;
            var status = s.status;
            var tele = s.tele;
            console.log(that.student);
            console.log(this.$refs[formName]);
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.axios({
                        method: 'post',
                        url: 'http://192.168.2.225:8080/com.huidian.rem/UpdateStudent',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        data: JSON.stringify({
                            address: address,
                            cid: cid,
                            classname: classname,
                            birth: date,
                            // headmaster: headmaster,
                            name: name,
                            payway: payway,
                            school: school,
                            gender: sex,
                            sid: sid,
                            speciality: speciality,
                            status: status,
                            tel: tele
                        })
                    }).then(res => {
                        // console.log('xxx');
                        // console.log(res);
                        // 刷新页面
                        this.reload();

                        var that = this;
                        that.watch = true;
                        that.see = true;
                        that.seen = false;
                        that.$message.success('修改成功');
                    });
                    // .catch(error => {
                    //     console.log(error);
                    //     console.log('错误');
                    //     that.$message.error('修改失败');
                    // });
                } else {
                    // that.$message.warning('手机号错了呢')
                    var that = this;
                    var aaa = that.student;
                    aaa.payway = aaa.payway == 0 ? '分期' : '全款';
                    //  <!-- 状态（在读1、离校0、试听-1）
                    aaa.status = aaa.status == 1 ? '在读' : aaa.status == 0 ? '离校' : '试听';
                    that.$message.warning('Σσ(・Д・；)我我我什么都没做!!!');
                    return false;
                }
            });
        },
        nameselect: function() {
            this.$router.push({ name: 'stubasic' }).catch(err => err);
        },
        classselect: function() {
            this.$router.push({ name: 'stuclass' }).catch(err => err);
        },
        schoolselect: function() {
            this.$router.push({ name: 'stusource' }).catch(err => err);
        }
    }
};
</script>

<style lang="less" scoped>
//lang="less"  可以对标签的样式进行修改

.mask {
    z-index: 1;
}

.table_size {
    margin: auto;
    text-align: center;
    font-size: 20px;
    border-collapse: collapse;
    width: 1000px;
    thead {
        tr {
            td {
                background-color: aquamarine;
            }
        }
    }
    tbody {
        tr {
            td {
                background-color: cornflowerblue;
                .lol {
                    background-color: rgba(96, 96, 96, 0.22);
                    // opacity:0.22;
                    position: fixed;
                    top: 100px;
                    left: 250px;
                    // width: calc(100% - 600px);
                    // height: calc(100% - 200px);
                    width: 100%;
                    height: 100%;
                    z-index: 2;
                    div {
                        background-color: rgba(0, 0, 0, 1);
                        // opacity:0.5;
                        position: relative;
                        top: 15%;
                        left: 25%;
                        // width: calc(100% - 600px);
                        // height: calc(100% - 200px);
                        width: 30%;
                        height: 50%;
                    }
                }
            }
            td:last-child {
                border: 0px;
            }
        }
    }
}
</style>
